<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>


</head>
<!-- 组件也可以有data和methods，
    注意：1.data必须是一个方法，而且必须返回一个对象，为什么必须是方法？因为这样每次调用都是新的数据
         2.组件中的data使用方式和实例中的data使用方式一样

-->

<body>
    <div id='a'>
        <count></count>
    </div>

    <template id='b'>
        <div>
            <input type="button" value="+" @click='increase'>
            
            <p>{{num}}</p>
        </div>
    </template>
    <script>
        Vue.component('count', {
            template: '#b',
            methods: {
                increase: function() {
                    this.num++;
                }
            },
            data: function() {
                return {
                    num: 0
                };
            }
        })
        new Vue({
            el: '#a',
            data: {},

        })
    </script>
</body>

</html>